<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>用气详情</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../plugins/mui/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/life_housekeeper/wate_index.css" />
		<script src="../../js/statistics.js"></script>
		<script src="../../js/fontset.js"></script>
		<style type="text/css">
			body{
				background: #f0f0f0;
			}
			.mui-content{
				background-color: #f0f0f0;
			}
			.detail-info-box{
				background-color: #fff;
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: .15rem;
			}
			.detail-info-box p,h5{
				color: #333;
			}
			.detail-info-box h5{
				margin: 15px 0;
			}
			.detail-info-box em{
				font-style: normal;
				font-size: .25rem;
				font-weight: normal;
				margin: 8px 0;
			}
			.detail-info-box .detail-state{
				margin: 8px 0;
			}
			.detail-tab-view .detail-tab-cell{
				font-size: .15rem;
				background-color: #fff;
				margin-bottom: 10px;
			}
			.detail-cell-item{
				display: flex;
				justify-content: space-between;
				padding: 11px 15px;
				line-height: 1.4;
			}
			.detail-cell-item span:first-child{
				color: #666;
				width: 35%;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav header">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">用气详情</h1>
		</header>
		<div class="mui-content" id="detail">
			
		</div>
		<script src="../../plugins/mui/mui.min.js"></script>
		<script src="../../js/getApiToken.js"></script>
		<script src="../../js/md5.js"></script>
		<script src="../../plugins/template/template.js"></script>
		<script type="text/html" id="detailTpl">
			<div class="detail-info-box">
				<h5>{{cwrq | dateFormat}}应缴总额</h5>
				<em><span>{{qfje}}</span>元</em>
				{{if sfrq || zffs}}
				<span class="state-pay detail-state">已缴费</span>
				{{else}}
				<span class="state-no_pay detail-state">未缴费</span>
				{{/if}}
			</div>
			<div class="detail-tab-view">
				<div class="detail-tab-cell">
					<div class="detail-cell-item">
						<span>户号</span>
						<span>{{user.yhbh}}({{user.yhxm}})</span>
					</div>
					<div class="detail-cell-item">
						<span>用户地址</span>
						<span class="mui-text-right">{{user.yhdz}}</span>
					</div>
				</div>
				<div class="detail-tab-cell">
					<div class="detail-cell-item">
						<span>用气量</span>
						<span>{{ql}}立方米</span>
					</div>
					<div class="detail-cell-item">
						<span>燃气费</span>
						<span>{{qf}}元</span>
					</div>
					<div class="detail-cell-item">
						<span>违约金</span>
						<span>{{znj}}元</span>
					</div>
				</div>
				{{if sfrq || zffs}}
				<div class="detail-tab-cell">
					<div class="detail-cell-item">
						<span>缴费日期</span>
						<span>{{sfrq | dateFormat}}</span>
					</div>
					<div class="detail-cell-item">
						<span>支付方式</span>
						<span>{{zffs}}</span>
					</div>
				</div>
				{{/if}}
			</div>
		</script>
		<script type="text/javascript">
			mui.init();
			template.helper('dateFormat',function(date){
				if(date){
					var c,b1,b2,b3;
					if(date.length <= 6){
						b1 = date.substring(0,4);
						b2 = date.substring(4,6);
						c = b1+'年'+b2+'月';
						return c;
					}else{
						b1 = date.substring(0,4);
						b2 = date.substring(5,7);
						b3 = date.substring(8,10);
						c = b1+'年'+b2+'月'+b3+'日';
						return c;
					}
				}	
			});
			mui.plusReady(function(){
				var _self = plus.webview.currentWebview(),
				user = _self.user,
				detailInfo = _self.detailInfo;
				detailInfo.user = user;
				if(!detailInfo || detailInfo == ''){
					mui.toast('暂无信息');
					setTimeout(function(){
						mui.back();
					},1000)
					return;
				}
				detail = document.getElementById("detail"),
				detailHtml = template('detailTpl',detailInfo);
				detail.innerHTML = detailHtml;
			})
		</script>
	</body>
</html>
